<template>
  <div style="margin: 20px">
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item label="手机号">
        <el-input v-model="search.mobile" placeholder="手机号"></el-input>
      </el-form-item>
      <el-form-item label="用户类型">
        <el-select v-model="search.userType" placeholder="请选择">
          <el-option label="投资人" :value="1"></el-option>
          <el-option label="借款人" :value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="用户状态">
        <el-select v-model="search.status" placeholder="请选择">
          <el-option label="锁定" :value="0"></el-option>
          <el-option label="正常" :value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
        <el-button @click="clear">清空</el-button>
      </el-form-item>
    </el-form>

    <!--scope.row代表要渲染数据所在行的json对象  -->
    <el-table :data="users" border style="width: 100%">
      <el-table-column type="index" width="50" label="#"></el-table-column>
      <el-table-column prop="userType" label="用户类型">
        <template slot-scope="scope">
          <el-tag
            :type="scope.row.userType === 1 ? 'primary' : 'success'"
            disable-transitions
          >
            {{ scope.row.userType === 1 ? '投资人' : '借款人' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="mobile" label="手机号码"></el-table-column>
      <el-table-column prop="name" label="用户姓名"></el-table-column>
      <el-table-column prop="idCard" label="身份证号"></el-table-column>
      <el-table-column prop="integral" label="用户积分"></el-table-column>
      <el-table-column prop="createTime" label="注册时间"></el-table-column>
      <el-table-column prop="bindStatus" label="绑定状态">
        <template slot-scope="scope">
          <el-tag
            :type="scope.row.bindStatus === 0 ? 'primary' : 'success'"
            disable-transitions
          >
            {{ scope.row.bindStatus === 0 ? '未绑定' : '已绑定' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="用户状态">
        <template slot-scope="scope">
          <el-tag
            :type="scope.row.status === 0 ? 'primary' : 'success'"
            disable-transitions
          >
            {{ scope.row.status === 0 ? '锁定' : '正常' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="180">
        <template slot-scope="scope">
          <el-button
            size="mini"
            v-if="scope.row.status === 1"
            type="primary"
            @click="handleLock(scope.$index, scope.row)"
          >
            锁定
          </el-button>
          <el-button
            size="mini"
            v-else
            type="success"
            @click="handleLock(scope.$index, scope.row)"
          >
            解锁
          </el-button>
          <el-button
            size="mini"
            type="primary"
            @click="handleGetLoginRecords(scope.$index, scope.row)"
          >
            登录日志
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="text-align: center">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[3, 5, 7, 9]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
    <el-dialog title="登录日志" :visible.sync="dialogTableVisible">
      <el-table :data="records">
        <el-table-column type="index" width="50" label="#"></el-table-column>
        <el-table-column property="ip" label="IP" width="150"></el-table-column>
        <el-table-column
          property="createTime"
          label="登录时间"
          width="200"
        ></el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>
<script>
import userinfoApi from '@/api/userinfo'
export default {
  data() {
    return {
      records: [],
      dialogTableVisible: false,
      search: {},
      users: [], //页面需要显示的分页数据集合
      pageNum: 1,
      pageSize: 3,
      total: 0,
    }
  },
  created() {
    this.getUsers()
  },
  methods: {
    //条件查询按钮的单击事件
    onSubmit() {
      this.getUsers()
    },
    clear() {
      //设置条件查询对象的值为默认值  重新查询分页数据展示
      this.search = {}
      this.pageNum = 1
      this.getUsers()
    },
    //分页导航的事件函数
    handleSizeChange(size) {
      this.pageSize = size
      this.getUsers()
    },
    handleCurrentChange(num) {
      this.pageNum = num
      this.getUsers()
    },
    //锁定/解锁用户状态
    handleLock(index, row) {
      console.log(row)
      //现在状态是正常  锁定该账号
      userinfoApi.lockOrUnlock(row.id, row.status === 1 ? 0 : 1).then((r) => {
        this.$message.success(r.message)
        //刷新页面数据
        this.getUsers()
      })
    },
    //显示日志按钮事件函数
    handleGetLoginRecords(index, row) {
      userinfoApi.getUserLoginRecords(row.id).then((r) => {
        console.log(r)
        this.records = r.data.items
        this.dialogTableVisible = true
      })
    },
    getUsers() {
      userinfoApi
        .getUsers(this.pageNum, this.pageSize, this.search)
        .then((r) => {
          console.log(r)
          this.users = r.data.page.records
          //总记录条数 影响页码
          this.total = r.data.page.total
        })
    },
  },
}
</script>
